<template>
	<view class="prom-bar-container">
        <!-- <custom-price :price="assemble.sales_price" :size="50" :textColor="'#FFFFFF'"></custom-price> -->
        <view class="msg">
            <view class="text">
                <text class="goods-price">{{ assemble.sales_price | unitPrice('￥') }}</text>
                <text>拼团省{{ reduce_moeny | unitPrice('¥') }}</text>
            </view>
            <view class="text">
                <text class="icon assembld">{{ assemble.required_num }}人拼团</text>
                 <text class="old-price">{{ assemble.origin_price | unitPrice('￥') }}</text>
            </view>
        </view>
        <view class='count-down'>
            <view class='count-down-text'>距离结束还剩</view>
            <view class='count-down-times'>
                <text v-if="day > 0" class="day">{{day}}天</text>
                <text class='time'>{{hours}}</text>:
                <text class='time'>{{minutes}}</text>:
                <text class='time'>{{seconds}}</text>
            </view>
        </view>
        <u-modal v-model="pintuanshow" :content="content" @confirm="onConfirm()" ></u-modal>
	</view>
</template>

<script>
    /**
     * 商品详情页拼团组件
     *
     * ===== 使用场景 ======
     * 商品详情页。
     *
     * ===== 参数 =====
     * assemble        拼团详情
     * is_assemble     是否由拼团列表页进入
     */
    import { Foundation } from '@/ui-utils/index.js'
	export default {
        data() {
            return {
                timer: null,
                day: 0,
                hours: '00',
                minutes: '00',
                seconds: '00',
                pintuanshow: false,
                content: '拼团活动已结束'
              }
        },
        props: {
            is_assemble: {
                type: Boolean,
                default: false
            },
            assemble: {
                type: Object,
                default() {
                    return []
                }
            }
        },
        mounted() {
          this.assemble.time_left && this.contDown(this.assemble.time_left)
        },
        watch: {
          'assemble.time_left': function () {
            this.assemble.time_left && this.contDown(this.assemble.time_left)
          }
        },
        computed: {
          reduce_moeny() {
            return this.assemble.origin_price - this.assemble.sales_price
          }
        },
        methods: {
          contDown(times) {
            let end_ime = times
            this.timer = setInterval(() => {
              if (end_ime <= 0) {
                    this.pintuanshow = true
              } else {
                    const time = Foundation.countTimeDown(end_ime)
                    this.day = parseInt(time.day)
                    this.hours = time.hours
                    this.minutes = time.minutes
                    this.seconds = time.seconds
                    end_ime--
              }
            }, 1000)
          },
          onConfirm(){
              this.is_assemble = false;
              clearInterval(this.timer)
              this.$emit('count-end')
          }
        },
        destroyed() {
          clearInterval(this.timer)
        }

	}
</script>

<style lang="scss" scoped>
  .prom-bar-container {
      position: relative;
      display: flex;
      align-items: center;
      z-index: 10;
      height: 49px;
      color: #fff;
      background: url(../../static/images/background-promotion-bar.png) no-repeat,-webkit-linear-gradient(top,#fc5997,#ef4747);
      background-size: 259px,100%;
      .msg {
        flex: 1;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        height: 100%;
        padding: 5px;
        .old-price {
            text-decoration: line-through;
        }
        .text {
          width: calc(100% - 125px);
          display: flex;
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: center;
          .goods-price {
            font-weight: bold;
            & > em {
              font-size: 16px;
            }
          }
        }
        .icon {
          position: relative;
          display: inline-block;
          margin: -2px 15px 0 0;
          padding: 0 3px 0 18px;
          height: 15px;
          vertical-align: middle;
          line-height: 15px;
          font-size: 10px;
          &.assembld::before {
            background: #fff url() no-repeat 50%;
            background-size: 12px
          }
          &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 15px;
            height: 15px;
            border-top-left-radius: 1px;
            border-bottom-left-radius: 1px;
          }
          &::after {
            content: "";
            display: block;
            border: 1px solid #fff;
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
            bottom: 0;
            right: 0;
            border-radius: 2px;
          }
        }
      }
      /*倒计时*/
      .count-down {
        position: absolute;
        right: 0;
        top: 0;
        min-width: 125px;
        height: 100%;
        text-align: center;
        background-color: #f8f8f8;
        .count-down-text {
          margin: 5px 0 2px;
          font-size: 10px;
          color: #666;
        }
        .count-down-times {
          font-size: 14px;
          color: #ff5000;
        }
        .time {
          display: inline-block;
          margin: 0 1px;
          width: 23px;
          height: 21px;
          font-weight: 700;
          color: #fff;
          background-color: #ff5000;
        }
        .day {
          font-size: 12px;
        }
      }
    }
</style>
